<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混合</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <my-com1 title="组件1"></my-com1>
      <my-com2 title="组件2"></my-com2>
      <my-com3 title="组件3"></my-com3>
      
    </div>
  </body>

  <script>
    const App= Vue.createApp({})
    /*** 优化前
    const com1 = {
        props:['title'],
        template:`
            <div style="border:red solid 2px;">
                {{title}}
            </div>
        `
    }
    const com2 = {
        props:['title'],
        template:`
            <div style="border:blue solid 2px;">
                {{title}}
            </div>
        `
    }
    const com3 = {
        props:['title'],
        template:`
            <div style="border:green solid 2px;">
                {{title}}
            </div>
        `
    }
    ***/

    /*** 优化后, 公用部分props title被统一定义 ***/

    const myMixin = {
        props:['title']
    }

    const com1 = {
        mixins: [myMixin],
        template:`
            <div style="border:red solid 2px;">
                {{title}}
            </div>
        `
    }
    const com2 = {
        mixins: [myMixin],
        template:`
            <div style="border:blue solid 2px;">
                {{title}}
            </div>
        `
    }
    const com3 = {
        mixins: [myMixin],
        template:`
            <div style="border:green solid 2px;">
                {{title}}
            </div>
        `
    }

    App.component("my-com1",com1)
    App.component("my-com2",com2)
    App.component("my-com3",com3)
    App.mount("#Application")
  </script>

</html>